<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../css/header.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        #footer{
            /*background-image:url(美女.jpg);*/
        }
        body{
            font-family: 楷体;
        }
        #bodymid{
            width: 1440px;
            height: 500px;
           /* background-color: #e8e8e8;*/
        }
        #bodyleft{
            width: 500px;
            height: 500px;
           /* background-color: #0AA1DE;*/
            position: relative;
            float: left;

        }
        #bodyright{
            width: 900px;
            height: 500px;
            /*background-color: #e89aa8;*/
            position: relative;
            float: left;
            margin-left: 40px;
        }
       #tupian{
           width: 500px;
           height: 500px;
       }
       #biaoti{
           width: 720px;
           height: 60px;

       }
        #title{
            font-size: 20px;
        }
        #price{
            width: 720px;
            height: 100px;
           /* background-color: #4cae4c;*/
        }
        #money{
            color: red;
            font: 25px "Microsoft yahei";
        }
        #money2{
            color: purple;
            font: 18px "Microsoft yahei";
            width: 60px;
            height: 20px;
        }
        #manjian{
            width: 32px;
            height: 22px;
            border: 1px solid red;
            color: red;
        }
        #huodong{
           font-size: 12px;
        }
        #gongneng{
            width: 720px;
            height: 90px;
        }
       #qita{
           position: relative;
           margin-top: 10px;
           width: 720px;
           height: 200px;
          /* background-color: yellow;*/
       }
       .img4{
           width: 178px;
           height: 160px;
          /* background-color: #0AA1DE;*/
           position: relative;
           top: -24px;
           float: left;
           border: 1px solid black;
       }
        .bianhua{
            width: 50px;
            height: 50px;
            font-size: 30px;
            position: relative;
            top: 5px;
        }
        #goumai{
            width: 200px;
            height: 45px;
            margin-top: 60px;
            position: relative;
        }
        .tu4{
            width: 178px;
            height: 160px;
        }
        #kankan{
            font-size: 20px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            display: block;
           /* background-color: #0AA1DE;*/
        }
    </style>
</head>
<body>
<!--头-->
<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>
        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click.prevent="fn1()">退出</a>
    </div>
</div>
<!--身体-->
<div id="bodymid">
    <div id="bodyleft">
        <img src="洗发水.jpg" alt="" id="tupian">
    </div>
    <div id="bodyright">
        <div id="biaoti">
            <p id="title">卡诗（KERASTASE） 黛丝逸柔洗发水80ml
                柔顺改善干性干枯改善毛糙洗发乳（进口）改善沙发
            </p>
            <div id="price">
                价格:  <span id="money">¥199.00</span>
                <br>
                <span id="money2"> 会员价: ¥179.00</span>
                <br>
                促销:<span id="manjian">满减</span><span id="huodong">满500减25,满800减50</span>
            </div>
            <div id="gongneng">
                <input type="button" value="+" class="bianhua">
                <input type="button" value="-" class="bianhua">
                <input type="button" value="0" id="goumai">
            </div>
           <div id="qita">
               <p id="kankan">看看其他</p>
               <div class="img4"><img src="卡诗1.jpg" alt="" class="tu4"></div>
               <div class="img4"><img src="卡诗2.jpg" alt="" class="tu4"> </div>
               <div class="img4"><img src="卡诗3.jpg" alt="" class="tu4"></div>
               <div class="img4"><img src="卡诗4.jpg" alt="" class="tu4"></div>
           </div>



        </div>
    </div>
</div>





<!--脚-->
<div id="footer" >
    <div class="foot_t">
        <div id="zuo_boby">
            <h2 id="ft_title">A.S Hair Salon</h2>
            <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
            </p>
            <h3>Trusted by<span style="color: orange">500+ People</span></h3>
            <img src="微信.webp" alt="" class="tubiao">
            <img src="qq.webp" alt="" class="tubiao">
        </div>
    </div>
    <div class="foot_t">
        <div id="mid_boby">
            <h4>Quick Links</h4>
            <ul>
                <li><a href="" class="lianjie">>>&nbspHome</a></li>
                <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="foot_t">
        <div id="you_boby">
            <h4>Contact Info</h4>
            <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
            <p id="id2">电话:+1(12) 123 456 789</p>
            <p id="id3">座机:+1(12) 123 456 789</p>
            <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
        </div>
    </div>
</div>

</body>
<script src="../js/header.js"></script>
</html>